$fontSize: 20px;
$navHeight: 50px;
$tabbarHeight: 60px;

@function rem($pixel) {
  @return $pixel / $fontSize + rem;
}

.text-center {
  text-align: center;
}

.nav-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: rem($navHeight);
  nav {
    height: rem($navHeight);
    background-color: red;
    line-height: rem($navHeight);
    @extend .text-center;
    border-bottom: 1px solid black;
  }
}
.content-wrapper {
  width: 100%;
  height: 100%;
  padding: rem($navHeight) 0 rem($tabbarHeight);
  .content {
    height: 100%;
    background-color: green;
  }
}
.tabbar-wrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: rem($tabbarHeight);
  .tabbar {
    height: 100%;
    background-color: gainsboro;
    line-height: rem($tabbarHeight);
    @extend .text-center;
  }
}
